<template>
    <div id="app">
      <AppNavbar />

      <div class="vitae-detail-container">
        <div class="header">
          <h1>应聘者简历</h1>
          <button class="back-btn" @click="goBack">返回应聘者列表</button>
        </div>

        <div v-if="vitaeDetail" class="vitae-detail-content">
          <!-- 应聘者基本信息 -->
          <div class="vitae-basic-info">
            <div class="vitae-header">
              <img
                :src="vitaeDetail.avatarPath"
                :alt="vitaeDetail.nickname"
                class="avatar"
                @error="handleImageError"
              />
              <div class="vitae-title">
                <h2 class="nickname">{{ vitaeDetail.nickname }}</h2>
                <div class="basic-meta">
                  <span class="age">{{ vitaeDetail.age }}岁</span>
                  <span class="sex">{{ getSexText(vitaeDetail.sex) }}</span>
                  <span class="education">{{ vitaeDetail.education }}</span>
                </div>
              </div>
            </div>

            <!-- 技能标签 -->
            <div class="vitae-tags" v-if="vitaeDetail.tags && vitaeDetail.tags.length > 0">
              <span
                v-for="(tag, index) in vitaeDetail.tags"
                :key="index"
                class="tag"
              >
                {{ tag }}
              </span>
            </div>
          </div>

          <!-- 教育背景 -->
          <div class="vitae-section">
            <h3>教育背景</h3>
            <div class="education-detail">
              <div class="school-info">
                <span class="school">{{ vitaeDetail.school }}</span>
                <span class="major">{{ vitaeDetail.major }}</span>
              </div>
              <div class="graduation-time">
                毕业时间: {{ formatGraduationTime(vitaeDetail.graduationTime) }}
              </div>
            </div>
          </div>

          <!-- 工作经历 -->
          <div class="vitae-section">
            <h3>工作经历</h3>
            <div class="work-experience">
              <div v-if="vitaeDetail.workExperience" v-html="formatText(vitaeDetail.workExperience)"></div>
              <div v-else class="no-data">暂无工作经历</div>
            </div>
          </div>

          <!-- 自我评价 -->
          <div class="vitae-section">
            <h3>自我评价</h3>
            <div class="self-evaluation">
              <div v-if="vitaeDetail.selfEvaluation" v-html="formatText(vitaeDetail.selfEvaluation)"></div>
              <div v-else class="no-data">暂无自我评价</div>
            </div>
          </div>

          <!-- 简历文件 -->
          <div class="vitae-section">
            <h3>简历文件</h3>
            <div class="resume-file">
              <div v-if="vitaeDetail.resumeFile" class="file-info">
                <a :href="vitaeDetail.resumeFile" target="_blank" class="file-link">
                  <i class="file-icon">📄</i>
                  查看简历文件(PDF)
                </a>
              </div>
              <div v-else class="no-data">暂无简历文件</div>
            </div>
          </div>

          <!-- 状态操作按钮 (仅当status为not_viewed时显示) -->
          <div v-if="route.query.status !== 'interested'" class="status-actions">
            <div class="action-buttons">
              <button class="action-btn inappropriate-btn" @click="updateStatus('inappropriate')">
                不合适
              </button>
              <button class="action-btn interested-btn" @click="updateStatus('interested')">
                感兴趣
              </button>
            </div>
          </div>
        </div>

        <div v-else class="loading">
          加载中...
        </div>
      </div>
    </div>
  </template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import AppNavbar from '../components/AppNavbar.vue'
import apiClient from '../utils/api.js'

export default {
  name: 'CandidateVitaeView',
  components: {
    AppNavbar
  },
  setup () {
    const route = useRoute()
    const router = useRouter()
    const vitaeDetail = ref(null)
    const candidateId = ref(null)

    // 获取应聘者简历详情
    const fetchVitaeDetail = async () => {
      try {
        candidateId.value = route.query.candidateId

        if (!candidateId.value) {
          console.error('缺少候选人ID参数')
          return
        }

        const response = await apiClient.get('/employer/getVitaeDetail', {
          params: {
            candidateId: candidateId.value
          }
        })

        if (response.data.code === '200') {
          vitaeDetail.value = response.data.data
        } else {
          console.error('获取简历详情失败:', response.data.msg)
        }
      } catch (error) {
        console.error('请求简历详情出错:', error)
      }
    }

    // 更新投递状态user
    // 修改 updateStatus 方法
    const updateStatus = async (status) => {
      try {
        // 如果状态设置为感兴趣，则先添加联系人
        if (status === 'interested') {
          try {
            await apiClient.put('/employer/addContact', null, {
              params: {
                candidateId: candidateId.value
              }
            })
          } catch (contactError) {
            console.error('添加联系人失败:', contactError)
            // 即使添加联系人失败，也继续更新状态
          }
        }

        const response = await apiClient.post('/employer/updateDeliveryStatus', {
          userId: candidateId.value,
          positionId: route.query.positionId,
          status: status
        })

        if (response.data.code === '200') {
          // 更新成功后返回应聘者列表
          router.go(-1)
        } else {
          console.error('更新状态失败:', response.data.msg)
        }
      } catch (error) {
        console.error('更新状态出错:', error)
      }
    }

    // 获取性别文本
    const getSexText = (sex) => {
      const sexMap = {
        man: '男',
        woman: '女'
      }
      return sexMap[sex] || '未知'
    }

    // 格式化毕业时间
    const formatGraduationTime = (time) => {
      if (!time) return ''
      const date = new Date(time)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }

    // 格式化文本（处理换行等）
    const formatText = (text) => {
      if (!text) return ''
      return text.replace(/\n/g, '<br>')
    }

    // 处理图片加载错误
    const handleImageError = (e) => {
      e.target.src = 'https://my-web-project-test-https://photo.fanya.chaoxing.com/photo_80.jpg'
    }

    // 返回上一页
    const goBack = () => {
      router.go(-1)
    }

    onMounted(() => {
      fetchVitaeDetail()
    })

    return {
      vitaeDetail,
      route,
      getSexText,
      formatGraduationTime,
      formatText,
      handleImageError,
      goBack,
      updateStatus
    }
  }
}
</script>

  <style scoped>
  #app {
    background: linear-gradient(to right, #e0f7fa, #ffffff);
    min-height: 100vh;
    padding: 20px;
  }

  .vitae-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
  }

  .header h1 {
    color: #1890ff;
    margin: 0;
  }

  .back-btn {
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    background-color: #1890ff;
    color: white;
    border: 1px solid #1890ff;
    transition: all 0.3s;
  }

  .back-btn:hover {
    background-color: #40a9ff;
    border-color: #40a9ff;
  }

  .vitae-detail-content {
    background: white;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .vitae-basic-info {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
  }

  .vitae-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 20px;
  }

  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e8e8e8;
  }

  .vitae-title {
    flex: 1;
  }

  .nickname {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 24px;
  }

  .basic-meta {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }

  .basic-meta span {
    font-size: 16px;
    color: #666;
  }

  .vitae-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .tag {
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    background-color: #e6f7ff;
    color: #1890ff;
  }

  .vitae-section {
    margin-bottom: 30px;
    text-align: left;
  }

  .vitae-section h3 {
    color: #1890ff;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 18px;
    text-align: left;
  }

  .education-detail,
  .work-experience,
  .self-evaluation,
  .resume-file {
    color: #333;
    line-height: 1.6;
    text-align: left;
  }

  .school-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 10px;
  }

  .school,
  .major {
    font-size: 16px;
    color: #666;
  }

  .graduation-time {
    font-size: 14px;
    color: #999;
  }

  .file-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1890ff;
    text-decoration: none;
    padding: 10px 15px;
    border: 1px solid #1890ff;
    border-radius: 4px;
    transition: all 0.3s;
  }

  .file-link:hover {
    background-color: #e6f7ff;
  }

  .no-data {
    color: #999;
    font-style: italic;
  }

  /* 状态操作按钮样式 */
  .status-actions {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
  }

  .action-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .action-btn {
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    border: 1px solid transparent;
  }

  .inappropriate-btn {
    background-color: #ff4d4f;
    color: white;
  }

  .inappropriate-btn:hover {
    background-color: #ff7875;
  }

  .interested-btn {
    background-color: #52c41a;
    color: white;
  }

  .interested-btn:hover {
    background-color: #73d13d;
  }

  .loading {
    text-align: center;
    padding: 40px;
    font-size: 16px;
    color: #999;
  }

  @media (max-width: 768px) {
    .vitae-detail-container {
      padding: 10px;
    }

    .vitae-detail-content {
      padding: 20px;
    }

    .vitae-header {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .basic-meta {
      justify-content: center;
    }

    .school-info {
      flex-direction: column;
      gap: 10px;
    }

    .header {
      flex-direction: column;
      gap: 15px;
      align-items: stretch;
    }

    .action-buttons {
      flex-direction: column;
      gap: 10px;
    }

    .action-btn {
      width: 100%;
    }
  }
  </style>
